<template>
    <div class="write">
        <div>
            <div class="input-box">
                <label class="input-label">收件人</label>
                <input placeholder="user@mail.com" class="input" name="email" type="email" v-model="receiveUsername">
                <span class="input-helper">enter a valid email</span>
            </div>
            <div class="input-box">
                <label class="input-label">邮件主题</label>
                <input placeholder="enter your theme" class="input" name="theme" v-model="theme">
                <span class="input-helper">enter your theme here</span>
            </div>
        </div>
        <div id="editor" ref="editor"></div>
        <div style="margin-bottom: 10px;">
            <el-button @click="send" type="success" size="mini">发送</el-button>
            <el-button @click="cancel" size="mini">取消</el-button>
        </div>
    </div>
</template>

<script>
//import axios from "axios";
import * as Quill from 'quill'
import 'quill/dist/quill.core.css'
import 'quill/dist/quill.snow.css'
import axios from 'axios';

export default {
    name: "MyWrite",
    data() {
        return {
            http: 'https://localhost:7235',
            receiveUsername: '',
            theme: '',
            html: '',
            quill: null,
            options: {
                theme: 'snow',
                modules: {
                    // 工具栏的具体配置
                    toolbar: [
                        ['bold', 'italic', 'underline', 'strike'],        // toggled buttons
                        ['blockquote', 'code-block'],
                        [{ 'header': 1 }, { 'header': 2 }],               // custom button values
                        [{ 'list': 'ordered' }, { 'list': 'bullet' }],
                        [{ 'script': 'sub' }, { 'script': 'super' }],     // superscript/subscript
                        [{ 'indent': '-1' }, { 'indent': '+1' }],         // outdent/indent
                        [{ 'direction': 'rtl' }],                         // text direction
                        [{ 'size': ['small', false, 'large', 'huge'] }],  // custom dropdown
                        [{ 'header': [1, 2, 3, 4, 5, 6, false] }],
                        [{ 'color': [] }, { 'background': [] }],          // dropdown with defaults from theme
                        [{ 'font': [] }],
                        [{ 'align': [] }],
                        ['clean']                                         // remove formatting button
                    ],
                },
                placeholder: '请输入内容...'
            }
        };
    },
    methods: {
        _initEditor() {
            let editorDom = this.$el.querySelector('#editor')
            this.quill = new Quill(editorDom, this.options)
        },
        emitChange() {
            let html = this.$refs.editor.children[0].innerHTML
            console.log(html);
        },
        send() {
            this.html = this.$refs.editor.children[0].innerHTML
            const params = {
                addr: localStorage.getItem('addr'),
                pass: localStorage.getItem('pass'),
                receiveUsername: this.receiveUsername,
                data: this.html,
                title: this.theme,
            }
            axios
                .post(`${this.http}/Emails/send`, null, {
                    params
                })
                .then(() => {
                    this.$message({ type: 'success', message: '发送成功' })
                })
                .catch((error) => {
                    this.$message({ type: 'error', message: error })
                })
        },
        cancel() {
            this.$router.push({ name: 'zhuye' })
        }
    },
    mounted() {
        this._initEditor()
    }
};
</script>

<style scoped>
.write {
    width: 100%;
    height: 100%;
    padding: 12px 40px;
}
.input {
    position: relative;
    max-width: 95%;
    border: none;
    box-shadow: 0px 1.5px 0px 0px #858585;
    padding: 0.4rem;
    transition: all 200ms ease-in-out;
    opacity: 0.8;
}

.input-box {
    display: flex;
    flex-direction: column;
}

.input-label {
    font-size: 0.625rem;
    font-weight: bold;
    color: #858585;
    margin-bottom: 4px;
    margin-left: 1px;
}

.input-helper {
    color: #858585;
    font-size: 0.5rem;
    margin-top: 6px;
    margin-left: 1px;
    visibility: hidden;
    transform: translateY(-0.5rem);
    transition: all 100ms linear;
    z-index: -1;
}

.input::placeholder {
    color: rgb(145, 145, 145);
    font-size: 0.75rem;
}

.input::after {
    content: attr(placeholder);
    position: absolute;
    color: #161616;
    top: 0;
    left: 0;
}

.input:focus {
    border: none;
    box-shadow: 0px 1.5px 0px 0px #72e985;
    outline: none;
}

.input:focus + .input-helper {
    visibility: visible;
    transform: translateY(0rem);
}

.input:focus::placeholder {
    visibility: hidden;
}
#editor {
    margin-bottom: 15px;
    height: 370px;
}
</style>